<template>
	<view class="container">
		<view class="header" style="background-image: url(../../static/header.png);">
			<!-- <image src="../../static/header.png" mode=""></image> -->
		</view>
		<view class="content">
			<view class="h-header">
				<text>获取郑州市政策隔离信息</text>
			</view>
			<view class="footer">
				<view class="blue">
					<view class="first">
						<image class="location" src="../../static/icon1.png" mode=""></image>
						<text>出发城市：</text>
					</view>
					<navigator url="#" class="second">
						<text @click="getClose()">选择省份</text>
						<image class="down" src="../../static/down.png" mode="" @click="getSomes()"></image>
						<view class="shengfen shuju" v-show="bannerShow" v-for="(item, index) in somes" :key="index">
							{{item.name}}
						</view>
					</navigator>
					<navigator url="#" class="third">
						<text @click="getClose1()">选择城市</text>
						<image class="down" src="../../static/down.png" mode="" @click="getSomes1()"></image>
						<picker class="city shuju" v-show="bannerShow1" v-for="(item, index) in somes1" :key="index">
							{{item.name}}
							<view class="uni-input">{{ item[name] }}</view>
						</picker>
					</navigator>
				</view>
				<view class="red">
					<view class="first">
						<image class="location" src="../../static/icon2.png" mode=""></image>
						<text>出发城市：</text>
					</view>
					<navigator url="#" class="second">
						<text>选择省份</text>
						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
					<navigator url="#" class="third">
						<text>选择城市</text>
						<image class="down" src="../../static/down.png" mode=""></image>
					</navigator>
				</view>
				<view class="route">
					<view class="left">
						<image class="ico" src="../../static/icon3.png" mode=""></image>
						<text>出发路径:</text>
					</view>
					<view class="right">
						郑州-中牟
					</view>
				</view>
				<view class="time">
					<view class="left">
						<image class="ico" src="../../static/icon4.png" mode=""></image>
						<text>更新时间:</text>
					</view>
					<view class="right">
						2021-01-23 12:00:00
					</view>
				</view>
				<view class="gl">
					<view class="left">
						<image class="ico" src="../../static/icon5.png" mode=""></image>
						<text>隔离政策:</text>
					</view>
				</view>
				<view class="detail">
					<view class="neirong">
						该市都是低风险区,持"河南健康码"可自由有序流动.但根据往往会日哦文化和禁赛了房间在空军机计算机...
					</view>
					<navigator class="cha" url="#" @click="chaBtn()">查看详情>></navigator>
				</view>
				<view class="show">
					<text class="tuisong" url="#">订阅郑州->安阳隔离信息,信息更新第一时间推送给您</text>
					
				</view>
				<view class="mianze">
					免责说明:本页面信息仅提供参考,数据来源于官方.如要前往某地,可咨询当地社区办事处或当地政府.
				</view>
			</view>
			
			<view class="my-footer">
				<navigator url="#" class="share" @click="shareBtn()">
					分享
				</navigator>
				<navigator url="#" class="require" @click="requireBtn()">
					信息反馈
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	// let flag = true;
	export default {
		data() {
			return {
				somes: [],
				somes1: [],
				bannerShow: true,
				bannerShow1: true,
			}
		},
		// onBackPress() {
		// 	if(bannerShow){
		// 		this.bannerShow = false;
		// 		return true;
		// 	}
		// },
		methods: {
			chaBtn(){
				uni.navigateTo({
					url: "index2"
				});
			},
			shareBtn(){
				uni.navigateTo({
					url: "index4"
				});
			},
			requireBtn(){
				uni.navigateTo({
					url: "index3"
				});
			},
			getSomes(){
				// this.flag = false;
				// let _self = this;
				this.bannerShow = true;
				uni.request({
					url: "http://epidemic.site.ximengnaikang.com/api/v1/area/provinces",
					method: "GET",
					header: {
						"Contest-Type": "application/json",
					},
					success: (res) => {
						// _self.somes = res.data.data;
						this.somes = res.data.data;
						
					}
				});
			},
			getSomes1(){
				this.bannerShow1 = true;
				uni.request({
					url: "http://epidemic.site.ximengnaikang.com/api/v1/area/provinces?code",
					data:{
						code:"code"
					},
					method: "GET",
					header: {
						"Content-Type": "application/json",
					},
					success: (res)=> {
						this.somes1 = res.data.data; 
					}
				})
			
			},
			getClose(){
				this.bannerShow = false;
			},
			getClose1(){
				this.bannerShow1 = false;
			}
		},
	}
</script>

<style>
	.container .content .footer .shuju{
		z-index: 1;
		/* position: absolute; */
		font-size: 12px;
		font-weight: 600;
		background-color: #cccccc;
		/* background-color: #FFFFFF; */
		overflow-y: scroll;
	}
	.container {
		width: 375px;
		height: 100vh;
		background-color: #f9f9fb;
	}
	.container .header{
		width: 100%;
		height: 198px;
	}
	.container .header{
		width: 375px;
		height: 198px;
		
	}
	.container .content{
		margin-top: -20px;
		width: 375px;
		height: 574px;
		/* height: 700px; */
		background-color: #FFFFFF;
		border-radius: 12px;
	}
	.container .content .h-header{
		text-align: center;
		padding: 15px 0;
	}
	.container .content .h-header text{
		width: 176px;
		height: 16px;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 14px;
		color: #23459D;
	}
	.container .content .footer{
		height: calc(100%-50px);
		width: 345px;
		/* border: 1px solid black; */
		margin: 0 auto;
		/* box-sizing: border-box; */
	} 
	.container .content .footer .blue{
		height: 36px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		margin-top: 15px;
		position: relative;
	}
	.container .content .footer .blue .first{
		width: 90px;
		height: 14px;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 14px;
		color: #333333;
	}
	
	.container .content .footer .blue .second{
		width: 110px;
		height: 36px;
		background: #F7F7F7;
		opacity: 1;
		border-radius: 4px;
		line-height: 36px;
	}
	.container .content .footer .blue .second text{
		width: 64px;
		height: 16px;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		color: #333333;
	}
	.container .content .footer .blue .third{
		width: 110px;
		height: 36px;
		background: #F7F7F7;
		opacity: 1;
		border-radius: 4px;
		line-height: 36px;
	}
	.container .content .footer .blue .third text{
		width: 64px;
		height: 16px;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		color: #333333;
	}
	
	.container .content .footer .red{
		height: 36px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		margin-top: 15px;
	}
	.container .content .footer .red .first{
		width: 90px;
		height: 14px;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 14px;
		color: #333333;
	}
	.container .content .footer .red .second{
		width: 110px;
		height: 36px;
		background: #F7F7F7;
		opacity: 1;
		border-radius: 4px;
		line-height: 36px;
	}
	.container .content .footer .red .second text{
		width: 64px;
		height: 16px;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		color: #333333;
	}
	
	.container .content .footer .red .third{
		width: 110px;
		height: 36px;
		background: #F7F7F7;
		opacity: 1;
		border-radius: 4px;
		line-height: 36px;
	}
	.container .content .footer .red .third text{
		width: 64px;
		height: 16px;
		font-size: 16px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		color: #333333;
	}
	
	.container .content .footer .location{
		margin: 0 3px;
		width: 12px;
		height: 13px;
		/* background-color: #444444; */
	}
	.container .content .footer .down{
		margin: 0 3px;
		width:32upx;
		height:20upx;
		/* background-color: #999999; */
	}
	.container .content .footer .ico{
		margin: 0 3px;
		width: 15px;
		height: 15px;
	}
	.container .content .footer .route{
		margin-top: 15px;
		height: 20px;
		display: flex;
		justify-content: space-between;
		/* line-height: 20px; */
		align-items: center;
	}
	.container .content .footer .route .left{
		/* width: 100px;
		height: 14px; */
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 14px;
		color: #333333;
	}
	.container .content .footer .route .right{
		/* width: 61px;
		height: 14px; */
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		color: #333333;
		margin-top: 2px;
	}
	.container .content .footer .time{
		margin-top: 15px;
		/* height: 15px; */
		display: flex;
		justify-content: space-between;
		line-height: 15px;
		align-items: center;
	}
	.container .content .footer .time .left{
		/* width: 100px;
		height: 14px; */
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 14px;
		color: #333333;
		
	}
	.container .content .footer .time .right{
		/* width: 130px;
		height: 14px; */
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		color: #333333;
		margin-top: 2px;
	}
	.container .content .footer .gl{
		margin-top: 15px;
		/* height: 15px;
		line-height: 15px; */
	}
	.container .content .footer .gl .left{
	/* 	width: 100px;
		height: 14px; */
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		line-height: 14px;
		color: #333333;
	}
	.detail{
		width: 345px;
		height: 93px;
		background: #F7F7F7;
		opacity: 1;
		border-radius: 4px;
		margin: 15px auto;
		display: flex;
		align-items: center;
		flex-direction: column;
		/* position: relative; */
	}
	.detail .neirong{
		width: 316px;
		height: 57px;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 21px;
		color: #333333;
		margin-top: 10px;
		
	}
	.detail .cha{
		/* width: 72px;
		height: 14px; */
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		color: #23459D;
		/* position: absolute; */
		text-align: end;
		margin-left: 260px;
		/* margin-right: 15px; */
	}
	.show{
		margin-top: 10px;
		width: 345px;
		height: 36px;
		background: #FF6600;
		/* background-color: #007AFF; */
		opacity: 0.1;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FF6600;
	}
	.show text.tuisong{
		/* width: 287px;
		height: 12px; */
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 14px;
		/* opacity: 1 !important; */
		/* color: #FF6600; */
	}
	.mianze{
		width: 345px;
		height: 30px;
		font-size: 12px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 18px;
		color: #999999;
		margin: 20px auto;
	}
	.my-footer{
		position: fixed;
		bottom: 0;
		width: 375px;
		height: 50px;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: space-around;
		text-align: center;
		align-items: center;
	}
	.my-footer .share{
		width: 130px;
		height: 40px;
		background: #23459D;
		opacity: 1;
		border-radius: 20px;
		line-height: 40px;
		color: #FFFFFF;
	}
	.my-footer .require{
		width: 130px;
		height: 40px;
		background: #23459D;
		opacity: 1;
		border-radius: 20px;
		line-height: 40px;
		color: #FFFFFF;
	}
</style>
